<!--
     Cayley diagram visualizer
-->
<html>
   <head>
      <title>Cayley Diagram Visualizer</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <link rel="icon" type="image/png" href="./images/favicon.png"></link>
      <link rel="stylesheet" href="./style/fonts.css" type="text/css"></link>
      <link rel="stylesheet" href="./style/menu.css" type="text/css"></link>
      <link rel="stylesheet" href="./style/sliders.css" type="text/css"></link>
      <link rel="stylesheet" href="./visualizerFramework/visualizer.css" type="text/css"></link>
      <link rel="stylesheet" href="./subsetDisplay/subsets.css" type="text/css"></link>
      <link rel="stylesheet" href="./diagramController/diagram.css" type="text/css"></link>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
       #vert-container {
          min-width: 20em;  /* Ensure room for diagram-control graphic */
       }

       #view-control, #diagram-control {
          display: none;  /* hidden initially, renders faster */
       }

       #graphic {
          -webkit-user-select: none;  /* prevents cut-and-paste in graphic */
       }
       
       .tooltip ul {
          margin: 0;
          padding-inline-start: 1em;
       }
      </style>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
      <script type="text/x-mathjax-config">
       MathJax.Hub.Config({
          CommonHTML: {
             scale: 100,   /* scale MathJax to match the HTML around it */
          },
          showMathMenu: false,   /* disable MathJax context menu (it interferes with subsetDisplay context menu) */
       });
       MathJax.Hub.processUpdateTime = 1000;  // allow MathJax to work longer at a stretch, improves initial load time
       MathJax.Hub.processSectionDelay = 0;   // no pause to let browser handle interaction -- only busy during loading
       MathJax.Hub.processUpdateDelay = 0;
      </script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=MML_CHTML"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.js"></script>
      <script>module = { };</script>
      <script src="https://cdn.jsdelivr.net/npm/three-trackballcontrols@0.0.7/index.js"></script>
      <script>THREE.TrackballControls = module.exports;</script>
      <script src="https://cdn.jsdelivr.net/npm/jquery-resizable-dom@0.32.0/dist/jquery-resizable.js"></script>
      <script src="./lib/THREE.MeshLine.js"></script>
      <script src="./build/allGroupExplorer.js"></script>
      <script src="./build/allVisualizer.js"></script>
      <script src="./CayleyDiagram.js"></script>
   </head>
   <body class="vert">
      <div id="control-options" class="horiz">
         <button id="subset-button">Subsets</button>
         <button id="view-button">View</button>
         <button id="diagram-button">Diagram</button>
      </div>

      <div id="subset-control" class="fill-vert">
         <!-- This is filled in by subsetDisplay/subsets.html -->
      </div>

      <div id="view-control" class="vert fill-vert control">
         <!-- This is filled in by cayleyViewController/view.html -->
      </div>

      <div id="diagram-control" class="fill-vert control">
         <!-- This is filled in by diagramController/diagram.html -->
      </div>
   </body>

   <!-- Templates for tooltips -->
   <template id="single-object-template">
      <div id="tooltip" class="tooltip remove-on-clean" objectIDs="${objectIDs_string}">${top}</div>
   </template>

   <template id="double-object-template">
      <div id="tooltip" class="tooltip remove-on-clean" objectIDs="${objectIDs_string}">
         <b>In front:</b> ${top}<br>
         <b>Behind:</b> ${rest[0]}
      </div>
   </template>

   <template id="multi-object-template">
      <div id="tooltip" class="tooltip remove-on-clean" objectIDs="${objectIDs_string}">
         <b>In front:</b> ${top}<br>
         <b>Others behind:</b>
         <ul>
            ${rest.map( function (obj) { return `<li>${obj}</li>` } ).join('')}
         </ul>
      </div>
   </template>
</html>
